<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp"%><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
<title>${server==null?"全局":server.name}service表</title>

<div class="container-fluid " > <!--table行-->
    <h1 class="text-center">${server==null?"全局":server.name}:service表</h1>
    <table class="table table-striped table-bordered table-hover " style="table-layout:inherit">
        <thead>
        <tr >
            <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
            <th class="col-md-1 "><input type="checkbox" id="selectall2" onchange="selectall(this)" > 全选</th>
            <th class="col-md-1">编号</th>
            <th class="col-md-1">服务器</th>
            <th class="col-md-1">名称</th>
            <th class="col-md-1">version</th>
            <th class="col-md-1">ports</th>
            <th class="col-md-1">customer</th>
            <th class="col-md-1">programmer</th>
            <th class="col-md-1">有效期</th>
            <th class="col-md-2 text-center detail " >操作
                <div class="btn btn-default btn-sm glyphicon glyphicon-plus create hand" title="添加一个服务"></div>
            </th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.services}" var="service" varStatus="serviceStatus">
            <tr class="tr">
                <td>
                    <input type="checkbox">
                    <span class="number">${serviceStatus.count}</span>
                </td>
                <td class="id">${service.id}</td>
                <td class="serverId">${serverService.queryServerById(service.serverId).name}</td>
                <td class="name">${service.name}</td>
                <td class="version">${service.version}</td>
                <td class="ports">${service.ports}</td>
                <td class="customer">${service.customer}</td>
                <td class="programmer">${service.programmer}</td>
                <td class="endTime">${service.endTime}</td>
                <td class="detail text-center">

                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-pencil edit hand" ></div>
                        <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-wrench config hand" title="配置服务内部"></div>
                    </div>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form"> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">二级</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdownAndInput">
                            <li>
                                <a class="option">nginx</a>
                            </li>
                            <li>
                                <a  class="option">php</a>
                            </li>
                            <li>
                                <a  class="option">mysql</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input  type="text" class="form-control input"  style="width: 100px">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true"><!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true"><!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->
    <p>config按钮要做成跳转的,在后台拿到配置文件在前台做textarea</p>
</div> <!--table行-->
</body>
<script>
    $("table").click(function (event){//detail 操作模块的点击事件,利用冒泡
        let eventTarget=$(event.target);
        if(eventTarget.hasClass('edit')){//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
            let trObj=eventTarget.closest(".tr");//下一步,把tr每一项作为input,等待修改:策略->"td不多,根据class获取td;根据td.innhtml获取text,作为input的value"
            if(trObj.find(".nameEdit").length>0){
                return ;
            }
            trObj.children().each(function (index,element){
                let inputCreate=document.createElement("input");
                inputCreate.className="form-control"
                switch ($(element).attr("class")){
                    //case "id":
                    //    inputCreate.classList.add("idEdit");
                    //    inputCreate.value=element.innerText;
                    //    inputCreate.placeholder="新增时不要添加id";
                    //    $(element).html('').append(inputCreate);
                    //    break;
                    //case "server":
                    //    inputCreate.classList.add("serverEdit");
                    //    inputCreate.value=$(element)[0].innerHTML;
                    //    $(element).html('').append(inputCreate);
                    //    break;
                    case "name":
                        inputCreate.classList.add("nameEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "version":
                        inputCreate.classList.add("versionEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    //case "ports":
                    //    inputCreate.classList.add("portsEdit");
                    //    inputCreate.value=element.innerText;
                    //    $(element).html('').append(inputCreate);
                    //    break;
                    case "customer":
                        inputCreate.classList.add("customerEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "programmer":
                        inputCreate.classList.add("programmerEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "endTime":
                        inputCreate.classList.add("endTimeEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    default:
                    // console.log('default')
                }
            })
        }//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
        if(eventTarget.hasClass('create')){//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
            console.log("拼凑tr")
            let trObj=$("<tr>")
            trObj.addClass("tr")
                let tdObjCount=$("<td>")
                let inputCheckBoxObj=$("<input>")
                inputCheckBoxObj.attr("type","checkbox")
                tdObjCount.append(inputCheckBoxObj)
                let spanObj=$("<span/>")
                let lastCount=eventTarget.closest("table").children("tbody").children("tr:last").find(".number:first").html()
                let count=parseInt(lastCount)+1;
                spanObj.addClass("number")
                spanObj.html(count)
                tdObjCount.append(spanObj)
            trObj.append(tdObjCount)
                let tdObjId=$("<td>")
                tdObjId.addClass("id").addClass("createSign").addClass("fontSize14")
                // let inputObjId=$("<input>")
                // inputObjId.addClass("form-control").addClass("idEdit")
                // inputObjId.attr("placeholder","新增时不要添加id")
                //tdObjId.append(inputObjId)
                tdObjId.html("id会在创建时自动生成")
            trObj.append(tdObjId)
                let tdObjServer=$("<td>")
                tdObjServer.addClass("server")
                <c:if test="${not empty serverName}">
                    tdObjServer.html("${serverName}")
                    tdObjServer.attr("data",${server.id})
                </c:if>
                <c:if test="${empty serverName}">
                    let selectObj=$("<select/>")
                    selectObj.addClass("form-control serverEdit")
                        let optionObj1=$("<option/>")
                        optionObj1.val("default")
                        optionObj1.html("请选择服务器")
                        selectObj.append(optionObj1)
                    <c:forEach items="${requestScope.servers}" var="server">
                        //新建option
                        var optionObj=$("<option/>")
                        optionObj.val(${server.id})
                        optionObj.html("${server.name}")
                        selectObj.append(optionObj)
                    </c:forEach>
                    tdObjServer.append(selectObj)
                </c:if>
            trObj.append(tdObjServer)
                let tdObjName=$("<td>")
                tdObjName.addClass("name")
                let inputObjName=$("<input>")
                inputObjName.addClass("form-control").addClass("nameEdit")
                inputObjName.attr("placeholder","如:nginx")
            tdObjName.append(inputObjName)
            trObj.append(tdObjName)
                let tdObjVersion=$("<td>")
                tdObjVersion.addClass("version")
                let inputObjIp=$("<input>")
                inputObjIp.addClass("form-control").addClass("versionEdit")
                inputObjIp.attr("placeholder","如:1.16")
                tdObjVersion.append(inputObjIp)
            trObj.append(tdObjVersion)
                let tdObjPorts=$("<td>")
                tdObjPorts.addClass("ports")
                //let inputPorts=$("<input>")
                //inputPorts.addClass("form-control").addClass("portsEdit")
                //inputPorts.attr("placeholder","如:80,443")
                //tdObjPorts.append(inputPorts)
            trObj.append(tdObjPorts)
                let tdObjCustomer=$("<td>")
                tdObjCustomer.addClass("customer")
                let inputObjCustomer=$("<input>")
                inputObjCustomer.addClass("form-control").addClass("customerEdit")
                inputObjCustomer.attr("placeholder","如:济宁")
                tdObjCustomer.append(inputObjCustomer)
            trObj.append(tdObjCustomer)
                let tdObjProgrammer=$("<td>")
                tdObjProgrammer.addClass("programmer")
                let inputObjProgrammer=$("<input>")
                inputObjProgrammer.addClass("form-control").addClass("programmerEdit")
                inputObjProgrammer.attr("placeholder","如:高广超")
                tdObjProgrammer.append(inputObjProgrammer)
            trObj.append(tdObjProgrammer)
                let tdObjEndTime=$("<td>")
                tdObjEndTime.addClass("endTime")
                let inputObjEndTime=$("<input>")
                inputObjEndTime.addClass("form-control").addClass("endTimeEdit")
                inputObjEndTime.attr("placeholder","如:2021-04-02")
                tdObjEndTime.append(inputObjEndTime)
            trObj.append(tdObjEndTime)
                let tdObjDetail=$("<td>")
                tdObjDetail.addClass("detail text-center")
                    let divObjBtnGroup=$("<div/>")
                divObjBtnGroup.addClass("btn-group")
                    let divObjEdit=$("<div/>")
                    divObjEdit.addClass("btn btn-default glyphicon glyphicon-pencil edit hand")
                divObjBtnGroup.append(divObjEdit)
                    let divObjUpdate=$("<div/>")
                    divObjUpdate.addClass("btn btn-default glyphicon glyphicon-ok update hand")
                divObjBtnGroup.append(divObjUpdate)
                    let divObjdelete=$("<div/>")
                    divObjdelete.addClass("btn btn-default glyphicon glyphicon-remove delete hand")
                divObjBtnGroup.append(divObjdelete)
                    let divObjConfigService=$("<div/>")
                    divObjConfigService.addClass("btn btn-default glyphicon glyphicon-wrench config hand")
                    divObjConfigService.attr("title","配置服务内部")
                divObjBtnGroup.append(divObjConfigService)
                tdObjDetail.append(divObjBtnGroup)
            trObj.append(tdObjDetail)
            eventTarget.closest("table").children("tbody").append(trObj)
        }//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
        if(eventTarget.hasClass('update')){//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if(eventTarget.closest("tr").find(".form-control:last").hasClass("endTimeEdit")){
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            }else{
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if(eventTarget.hasClass('delete')){//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("idEdit")){
                if(confirm("打开状态下,不允许删除;现在刷新页面")){
                    location.reload();
                }
            }else{
                $("#delete").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            }
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
        if(eventTarget.hasClass('config')){//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("endTimeEdit")){
                if(confirm("打开状态下,不允许删除;现在刷新页面")){
                    location.reload();
                }
            }else{
                let serviceId=eventTarget.closest(".tr").children(".id:first").html();
                console.log(serviceId);
                window.open("<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId="+serviceId);
                // $("#delete").modal("show")
                // $('.yaotijiaodedian').remove('yaotijiaodedian')
                // $(eventTarget).addClass("yaotijiaodedian")
            }
        }//此时,已经明确了触发事件的元素是"config"元素,下一步获取整个tr-id
    })//table 的点击事件,利用冒泡
    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        console.log(1)
        let eventTarget=$('.yaotijiaodedian')
        let trObj = {};
        let idObj=eventTarget.closest("tr").find(".id:first")
        console.log(idObj)
        if(idObj.hasClass("createSign")){

        }else{
            let id=idObj.html()
            trObj["id"]=id
        }
        if(eventTarget.closest("tr").find(".server:first").attr("data")){
            trObj["server"]=eventTarget.closest("tr").find(".server:first").attr("data");
        }
        let arr = ["server", "name", "version", "customer","programmer","endTime"];
        eventTarget.closest("tr").find(".form-control").each(function (index, element) { //构建tr-json对象
            //如果有idEdit,就为id赋值
            // if ($(element).hasClass("idEdit")){
            //     trObj["id"]=$(element).val()
            // }
            for (let i in arr) { //不写这个就要把上面的这个if写5次
                if ($(element).hasClass(arr[i] + "Edit")) {
                    trObj[arr[i]] = $(element).val()
                }
            }//不写这个就要把上面的这个if写5次
        })//构建tr-json对象
        console.log(trObj)
        if(trObj.server=="default"){
            alert("必须选择服务器")
            return
        }
        if(trObj.name==""){
            alert("请注明服务名称是什么")
            return
        }
        if(trObj.version==""){
            alert("请注明服务版本是什么")
            return
        }
        if(trObj.customer==""){
            alert("请写清楚这个服务的客户")
            return
        }
        if(trObj.programmer==""){
            alert("请写清楚这个服务是哪个程序员负责的")
            return
        }
        if(trObj.endTime==""){
            alert("任何服务必须有生命周期")
            return
        }
        //return
        $.ajax({
            type: "post",
            url: "<%=basepath%>serviceServlet?action=ajaxCreateService",
            data: trObj,
            success: function (response, status, xhr) {
                console.log("收到回信")
                console.log(response)
                if(response=="存入成功"){
                    console.log("存入成功")
                    <c:if test="${empty server}">
                        location.href="<%=basepath+"serviceServlet?action=list"%>";
                    </c:if>
                    <c:if test="${not empty server}">
                        location.href="<%=basepath+"serviceServlet?action=list&serverId="%>${server.id}";
                    </c:if>
                }else {
                    alert("存入失败");
                }
            },
            timeout: 10000, //如果超时1000毫秒，就结束
            error: function (xhr, errorText, errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:" + errorText); //error
                console.log("errorType:" + errorType); //not found
                console.log("xhr.status:" + xhr.status); //404
                console.log("xhr.statusText:" + xhr.statusText); //not found
            },
            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget=$('.yaotijiaodedian')
        let trObj=eventTarget.closest(".tr");
        $.ajax({
            type:"post",
            url:"<%=basepath%>serviceServlet?action=ajaxDeleteService",
            data:{"id":trObj.children(".id:first").html()},
            success:function (response,status,xhr) {
                console.log("收到回信")
                console.log(response)
                if(response=="删除成功"){
                    <c:if test="${empty server}">
                    location.href="<%=basepath+"serviceServlet?action=list"%>";
                    </c:if>
                    <c:if test="${not empty server}">
                    location.href="<%=basepath+"serviceServlet?action=list&serverId="%>${server.id}";
                    </c:if>
                }else {
                    alert("删除失败");
                }
            },
            timeout:10000, //如果超时1000毫秒，就结束
            error:function (xhr,errorText,errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:"+errorText); //error
                console.log("errorType:"+errorType); //not found
                console.log("xhr.status:"+xhr.status); //404
                console.log("xhr.statusText:"+xhr.statusText); //not found
            },
            dataType:"text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//这是删除的模态框点击了确定键后搜索数据并提交的过程
    $('.objectChild').click(function (event){
        if($(event.target).hasClass("option")){//这是确定了点击的是ul-li-a
            let htmlText=$(event.target).html();
            if(htmlText=="docker"||htmlText=="kvm"){
                let changeTargetObj=$(".changeTarget")//数据源
                changeTargetObj.find('.text').html(htmlText)//替换数据源中显示的标题为docker或kvm
                $(".changeDiv").html(changeTargetObj.html())//把数据源赋值给目标区域
            }else{//如果这个a标签的内容不是docker或kvm,就可以把a的内容赋值给input
                $(event.target).closest('.dropdownAndInputForm').find('.input').val(htmlText)

                let virtualType=$(event.target).closest('.input-group-btn').find('.text').html()
                $(event.target).closest('.dropdownAndInputForm').find('.input').attr("virtualType",virtualType)
            }
        }else{
        }
    })//这是下拉菜单+input的点击事件,临时不用
</script><!--表格点击事件-->
</html>